<template>
  <div class="fullscreen">
    <!-- <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom"> -->
    <el-button class="btn-text can-hover" type="text" @click="toggle">
      <svg-icon v-if="isFullscreen" icon-class="screenfull1" />
      <svg-icon v-else icon-class="screenfull2" />
    </el-button>
    <!-- </el-tooltip> -->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('editor/fullscreen', ['isFullscreen'])
  },
  mounted() {
    // 初始化全屏监听
    this.listen()
    // 监听按键事件(Esc和F11)
    window.addEventListener('keyup', this.onKeyup)
  },
  beforeDestroy() {
    window.removeEventListener('keyup', this.onKeyup)
  },
  methods: {
    ...mapActions('editor/fullscreen', ['listen', 'toggle', 'set', 'update']),
    onKeyup(e) {
      if (e.keyCode === 27) {
        // ESC键: 取消全屏
        // 浏览器限制: F11全屏不能用ESC取消!!!最好的做法是保持esc不变!!!
        // if (that.isFullscreen) {
        // that.switchFullscreen(false);
        // }
      } else if (e.keyCode === 122) {
        // F11键
        // 重要信息: 浏览器在全屏模式下不会触发F11的键盘事件(被吃掉了)
        // 参考: http://www.it1352.com/818790.html
        // console.log('f11:', this.isFullscreen)
        // BUG: F11键切换全屏,在ie下图标能同步更新,但在chrome下F11退出全屏则不会更新图标
        this.set(!this.isFullscreen)
      }
    }
  }
}
</script>

<style lang="scss">
.fullscreen {
  height: inherit;
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;

  .el-button {
    padding: 0 0 !important;
  }
  // 按钮文字颜色
  // .el-button--text {
  //   color: #000000 !important;
  // }
  .svg-icon {
    width: 1.5em;
    height: 1.5em;
  }
}
</style>
